<%@include file="startUpIncludes.jsp" %>
<title>
New Lead
</title>
<script type="text/javascript" src="../js/modalwin.js"></script>
<!-- <script type="text/javascript" src="../js/validation.js"></script>
--><!-- <script type="text/javascript" src="../js/lead.js"></script> -->
<script type="text/javascript">
function getAjaxCities() {
// alert($('#country').val());
var selectedCountry = $('#country').val();

$.ajax({
type: "POST",
url: "/sales/s/leadFormCityCountry",
data: "selectedCountry="+selectedCountry,
success: function(response){
var cities = response.split('***');
var Ids = cities[0];
var Names = cities[1];
var cityIds = Ids.split("?");
var cityNames = Names.split("?");
// alert(cityIds[0]);
//alert(cityNames[0]);
$('#city').html('');
jQuery.each(cityIds , function(index, value){
var option = "<option value='" + value + "'>" + cityNames[index] + "</option>";
$('#city').append(option);
});
},
error: function(e){
//alert('Error: ' + e);
}
});
}
</script>
<script type="text/javascript">
function doKeyUpValidation(text) {
var validationRegex = RegExp(/[1-9]+/, "g"); // The regex was wrong
if( !validationRegex.match(text.value) )
{
alert('Please enter only numbers.');
}
} // this was missing before
</script>
<script type="text/javascript">
$(document).ready(function(){
$('[id^=empNum]').keypress(validateNumber);
});
function validateNumber(event) {
var key = window.event ? event.keyCode : event.which;

if (event.keyCode == 8 || event.keyCode == 46
|| event.keyCode == 37 || event.keyCode == 39) {
return true;
}
else if ( key < 48 || key > 57 ) {
return false;
}
else return true;
};
</script>
</head>
<body>
<jsp:include page="header.jsp" >
<jsp:param value="true" name="loggedIn"/>
</jsp:include>
<div class="modal-win-bg">
<div class="modal-win-box">
<div class="modal-win-hd">
<span class="modal-win-title"></span>
<span class="modal-win-close">x</span>
</div>
<div class="modal-win-content"></div>
<a class="form-btn modal-win-ok">OK</a>
</div>
</div>
<div class="wrap">
<div class="fitBG">
<div class="main">
<%@include file="basicLeftMenu.jsp" %>
<div class="content">
<jsp:include page="tabs.jsp" >
<jsp:param value="leads" name="currentPage"/>
</jsp:include>
<div class="tab-content">
<h3>New Lead</h3>
<span class="numberError error-block">Please enter a valid number.</span>
<form:form cssClass="new-lead-form" commandName="leadForm" method="post" action="/sales/s/newLead" id="newLeadForm">
<form:errors path="*" cssClass="error-block" element="div"/>
<form:hidden path="leadId" />
<div class="btns">
<input type="submit" value="Save" class="form-btn"/><a href="/sales/s/leads" class="form-btn">Cancel</a>
</div>
<div class="form-row">
<h4>Required Information</h4>
<div class="info"><label>Lead Owner: </label><span>${userDetails.fName} ${userDetails.lName}</span></div>
<div class="input-col">
<label>First Name:</label>
<form:input path="fName" cssClass="TB" name="fname"/>
<label>Last Name: </label>
<form:input path="lName" cssClass="TB" name="lname"/>
</div>
<div class="input-col">
<label>Company: <span class="required">*</span></label>
<form:input path="companyName" cssClass="TB" name="company"/>
<label>Lead Status: </label>
<form:select path="leadStatus" cssClass="TB" name="status">
<c:forEach items="${leadStatus}" varStatus="leadStat">
<form:option value="${leadStat.index}">${leadStatus[leadStat.index].name}</form:option>
</c:forEach>
</form:select>
</div>
</div>
<div class="form-row">
<h4>Lead Information</h4>
<div class="input-col">
<label>Title: </label>
<form:input path="title" cssClass="TB" name="title"/>
<label>Phone: </label>
<form:input path="phone" cssClass="TB" name="phone" id="phone"/>
<label>Mobile: </label>
<form:input path="mobile" cssClass="TB" name="mobile" id="mobile"/>
</div>
<div class="input-col">
<label>Email: </label>
<form:input path="email" cssClass="TB" name="email"/>
<label>Rating: </label>
<form:select path="rating" cssClass="TB" name="rating">
<c:forEach items="${ratings}" varStatus="rating">
<form:option value="${rating.index}">${ratings[rating.index].name}</form:option >
</c:forEach>
</form:select>
<label>Sector: </label>
<form:input path="industry" cssClass="TB" name="industry"/>
</div>
</div>
<div class="form-row">
<h4>Address Information</h4>
<div class="input-col">
<label>Street: </label>
<form:textarea path="street" cssClass="TB" name="street"></form:textarea>
<label>Country: </label>
<form:select path="country" cssClass="TB" name="country" onchange="getAjaxCities();changeCountry();" id="country">
<c:forEach items="${countries}" var="country">
<form:option value="${country.id}">${country.countryName}</form:option >
</c:forEach>
</form:select>

<label>Area: </label>
<form:input path="state" cssClass="TB" name="state"/>
</div>
<div class="input-col">
<label>Zip/Postal Code: </label>
<form:input path="zipCode" cssClass="TB" name="zipcode" id="zipCode"/>
<label>City: </label>
<form:select path="city" cssClass="TB" name="city" id="city">
<option value="0">--none--</option>
<c:forEach items="${cities}" var="city">
<form:option value="${city.id}">${city.name}</form:option>
</c:forEach>
</form:select>
<label>Website: </label>
<form:input path="website" cssClass="TB" name="website"/>
</div>
</div>
<div class="form-row">
<h4>Additional Information</h4>
<div class="input-col">
<label>In/Out Bound: </label>
<form:radiobutton class="RdCh" path="inOutBound" value="In Bound"/><span class="RdCh">In Bound</span>
<form:radiobutton class="RdCh" path="inOutBound" value="Out Bound"/><span class="RdCh">Out Bound</span>

<label for="carsNum">Lead Need's Amount: </label>
<form:input path="carsNum" cssClass="TB" id="carsNum" name="carsNum" placeholder="--none--" />
<label>Category: </label>
<form:radiobutton class="RdCh" path="category" value="Individual"/><span class="RdCh">Individual</span>
<form:radiobutton class="RdCh" path="category" value="Corporate"/><span class="RdCh">Corporate</span>
<label>Lead Source: </label>
<form:input path="leadSource" cssClass="TB" id="leadSource" name="leadSource" placeholder="--none--" />
<%-- <form:select path="leadSource" cssClass="TB" name="leadsource">
<c:forEach items="${leadSources}" varStatus="leadSource">
<form:option value="${leadSource.index}">${leadSources[leadSource.index].name}</form:option >
</c:forEach>
</form:select>--%>
</div>
<div class="input-col">
<label for="empNum">No. of Employees: </label>
<form:input path="empNum" cssClass="TB" id="empNum" name="empNum" placeholder="--none--" maxlength="4"/>
<label>Annual Revenue: </label>
<form:input path="annualRevenue" cssClass="TB" name="annual" id="annRev"/>
<label>Description: </label>
<form:textarea path="description" cssClass="TB" name="description"></form:textarea>
</div>
<%-- <input type="file" class="TB file-input" name="fileInput"/> --%>
</div>
<div class="btns">
<input type="submit" value="Save" class="form-btn"/><a href="/sales/s/leads" class="form-btn">Cancel</a>
</div>
</form:form>
</div>
</div>
</div>

<%@include file="footer.jspf" %>
</div>
</div>

</body>
</html>